<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google 地图 API 示例: 路线规划</title>
    <script src=" http://ditu.google.cn/?file=api&amp;v=2.x&amp;key=ABQIAAAAPTwhF4vlVXrO7ZGOjA9sOxTqQ5WtUwE0C8FR1hRk-yj3qFOmhhR6esbxCerNyfzApAoTJGfOHzcKCQ"
      type="text/javascript"></script>
    <style type="text/css">
      body {
        font-family: Verdana, Arial, sans serif;
        font-size: 13px;
        margin: 2px;
      }
      table.directions th {
        background-color:#EEEEEE;
      }
      img {
        color: #000000;
      }
    </style>
    <script type="text/javascript">
 
    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;

    function initialize() {
      if (GBrowserIsCompatible()) {      
        map = new GMap2(document.getElementById("map_canvas"));
        gdir = new GDirections(map, document.getElementById("directions"));
//        GEvent.addListener(gdir, "load", onGDirectionsLoad);
        GEvent.addListener(gdir, "error", handleErrors);

        setDirections("北京", "上海", "zh-CN");
      }
    }
    
    function setDirections(fromAddress, toAddress, locale) {
      gdir.load("from: " + fromAddress + " to: " + toAddress,
                { "locale": locale });
    }

    function handleErrors(){
     var status = gdir.getStatus();
      switch(status.code) {
        case G_GEO_BAD_REQUEST :
          alert("路线规划查询条件设定有误");
          break;
        case G_GEO_SERVER_ERROR :
          alert("服务器不能正确解析你输入的地址");
          break;
        case G_GEO_MISSING_QUERY :
        case G_GEO_MISSING_ADDRESS :
          alert("查询条件（地址）不能为空");
          break;
        case G_GEO_UNKNOWN_ADDRESS :
          alert("查询地址未知");
          break;
        case G_GEO_UNAVAILABLE_ADDRESS :
          alert("因当地法律或其他原因不能解析给出地址");
          break;
        case G_GEO_UNKNOWN_DIRECTIONS :
          alert("给出的两地之间无路可走或我们的现有的数据中缺少路线规划路线");
          break;
        case G_GEO_BAD_KEY :
          alert("导入类库是指定的密钥有误");
          break;
        case G_GEO_TOO_MANY_QUERIES :
          alert("查询太过频繁，超出密钥允许的查询次数");
          break;
      }
  }

  function onGDirectionsLoad(){ 
      // Use this function to access information about the latest load()
      // results.

      // e.g.
      // document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
    // and yada yada yada...
  }
    </script>

  </head>
  <body onload="initialize()" onunload="GUnload()">
  
  <h2>地图API路线规划演示</h2>
  <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">

  <table>

   <tr><th align="right">从:&nbsp;</th>

   <td><input type="text" size="30" id="fromAddress" name="from"
     value="北京市"/></td>
   <th align="right">&nbsp;&nbsp;到:&nbsp;</th>
   <td align="right"><input type="text" size="30" id="toAddress" name="to"
     value="上海市" /></td></tr>

   <tr><th>语言:&nbsp;</th>
   <td colspan="3"><select id="locale" name="locale">

    <option value="zh-CN" selected>中文简体</option>

    <option value="zh-TW">中文繁体</option>

    <option value="en">英语</option>
    </select>

    <input name="submit" type="submit" value="开始路线规划!" />

   </td></tr>
   </table>

    
  </form>

    <br/>
    <table class="directions">
    <tr><th>路线规划结果</th><th>地图</th></tr>

    <tr>
    <td valign="top"><div id="directions" style="width: 375px; height: 400px; overflow:auto;"></div></td>
    <td valign="top"><div id="map_canvas" style="width: 410px; height: 400px"></div></td>

    </tr>
    </table> 
  </body>
</html>
